import React, { useEffect, useState, Component, useRef } from 'react';
import { fetchSync } from '@/utils/request';
import { history } from 'umi';
import { connect, router } from 'dva';

import enUS from 'antd/es/locale/en_US';
import {
    Menu, Switch, Divider, Checkbox, Button, Row, Col, Tooltip, notification, Skeleton,
    Form, Modal, Select, Tree, Icon, Radio, Table, Tag, Pagination, Input, Space, message, Card, Tabs, Collapse, Image, ConfigProvider
} from 'antd';
import { MailOutlined, AppstoreOutlined, SettingOutlined, AudioOutlined, UserOutlined, ArrowRightOutlined } from '@ant-design/icons';

import * as echarts from 'echarts';
import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
import styles from './style.less';
import * as turf from '@turf/turf';
import { Marker } from 'mapbox-gl';
import Mymenu from './mymenu';
import Home from './home';
import Sports from './sports';
import User from './user';
import Moments from './moments';
import Profit from './profit';

let markers = [];  
let jiuyuanMarkers = []; 


export default (props) => {
    const [activeItem, setActiveItem] = useState('Home')

    const [map, setMap] = useState(null);
    const [feature, setFeature] = useState({});
    const showmapContainer = useRef(null);
    const echarts1 = useRef(null);

    const [nowTime, setNowTime] = useState()
    const [selectId, setSelectId] = useState('ID1')
    const [jylObj, setjylObj] = useState({
        qszuida: 158,
        qspinjun: 71
    })

    const [selectQiangxianItem, setSelectQiangxianItem] = useState({ people: 0 })

    //初始函数
    useEffect(async () => {
        //此处编写 组件挂载之后和组件重新渲染之后执行的代码
        // taifeng_data = await fetchSync('/api/fangxun/taifeng/findAll')
        // qu_data = await fetchSync('/api/fangxun/qu/findAll')
        // qiangxian_data = await fetchSync('/api/fangxun/qiangxian/findAll')

        return () => {
            //此处编写 组件即将被卸载前执行的代码
        }
        // 4、若传值，但是传的是空数组 []，则表示该useEffect里的内容仅会在“挂载完成后和组件即将被卸载前”执行一次；
    }, [])

    const clickItem = (item)=>{
        setActiveItem(item)
    }
    
    return (
        <ConfigProvider locale={enUS} className={styles.show}>
            {/* <div className={styles.showmapContainer} ref={showmapContainer} > </div> */}
            {
                activeItem === 'Home' && <Home></Home>
            }
            {
                activeItem === 'Sports' && <Sports></Sports>
            }
            {
                activeItem === 'Moments' && <Moments></Moments>
            }
            {
                activeItem === 'User' && <User clickItem={clickItem}></User>
            }
            {
                activeItem === 'Profit' && <Profit></Profit>
            }
            <Mymenu clickItem={clickItem} />
        </ConfigProvider>
    );
}
